<template>
	<view class="main" :class="showData?'showBg':''">
		<view class="showData" v-if="showData">
			<view class="container u-skeleton">
				<view class="loadList" v-for="(item,index) in showList" :key="index">
					<view class="loadLogo u-skeleton-rect">加载中</view>
					<view class="loadInfo">
						<view class="loadTit u-skeleton-rect"> 加载中</view>
						<view class="loadTip u-skeleton-rect"> 加载中</view>
						<view class="loadPrice">
							<view class="loadText u-skeleton-rect">加载中</view>
							<view class="loadText u-skeleton-rect">加载中</view>
							<view class="loadText u-skeleton-rect">加载中</view>
						</view>
					</view>
				</view>
			</view>
			<!--引用组件-->
			<u-skeleton :loading="showData" :animation="true" bgColor="#FFF"></u-skeleton>
		</view>
		<view>
			<view class="topBox">
				<u-search placeholder="草本汤" v-model="keyword" bgColor='#ffffff' :showAction='false'
					style="width: calc(100% - 30px) !important;"></u-search>
				<image src="../../static/address.png" @click="toAddress"></image>
			</view>
			<u-tabs style="padding-bottom: 10px;" :list="cateList" lineColor='#8d4a32' bg-color='#f5f2f0 '
				active-color='#8d4a32' :current="current" @change="change"></u-tabs>
			<view class="selecBox">
				<view class="row" @click="toAddress">
					<image src="../../static/location.png" style="width: 15px;height: 15px;margin:0 3px 0 0;"></image>
					<text v-if='address'>{{address.addr}}</text>
					<text v-else>暂无收货地址</text>
					<image src="../../static/bot-70.png" style="margin-left: 3px;"></image>
				</view>
				<view class="box">
					时间排序<image src="../../static/select.png"></image>
				</view>
			</view>
			<view class="seller" v-for="(seller,index) in sellerList" :key="index"
				@click="toUrl(seller.hllId,seller.shopId)">
				<view>
					<u-lazy-load border-radius='10' :image="seller.shopImage" height='120' img-mode="aspectFill"
						:duration='300' style="width: 66px !important;"></u-lazy-load>
				</view>
				<view class="info">
					<view class="seller_tit">{{seller.shopName}}</view>

					<view class="seller_tip">
						<view class="tip">起送<text><text class="iconText">¥</text>{{seller.minCost}}</text></view>
						<view class="line"></view>
						<view class="tip">配送约<text><text class="iconText">¥</text>{{seller.minDeliveryFee}}</text>
						</view>
						<view class="seller_dic" v-text="countDistance(seller.distance)"></view>
					</view>
					<view class="goodsList" v-if="seller.showFoods">
						<scroll-view class="scroll__wrap" scroll-x="true">
							<block>
								<view class="scroll__item" v-for="(item,i) in seller.showFoods" :key="i">
									<view class="goodsInfo">
										<!-- <image :src="item.imgePath" mode="widthFix"></image> -->
										<u-lazy-load border-radius='10' :image="item.imgePath" height='200'
											img-mode="widthFix" :duration='300'
											style="width: 100px !important;"></u-lazy-load>
										<view class="goods_tit">{{item.foodName}}</view>
										<text><text class="iconText">¥</text>{{item.price}}</text>
									</view>
								</view>
							</block>
						</scroll-view>
					</view>
				</view>
			</view>
			<u-loadmore :status="status" style="padding-bottom: 10px;" />
			<view style="height: 50px;width: 100%;"></view>
		</view>
		<view class="scroll_top" @tap="topScrollTap" v-bind:class="[scrollTop != 0 ? 'active' : '', '']"
			style="bottom: 45px;">
			<u-icon name="arrow-up" color='#fff' size='25'></u-icon>
		</view>
	</view>
</template>

<script>
	export default {
		onPageScroll: function(e) {
			this.scrollTop = e.scrollTop > 300;
			this.scrollPage = e.scrollTop;
		},
		data() {
			return {
				scrollPage: 0,
				scrollTop: 0,
				showData: true,
				keyword: '',
				switch1: true,
				cateList: [{
					name: '全部',
				}, {
					name: '外卖',
				}, ],
				sellerList: [],
				showList: ['', '', '', '', '', '', ],
				// lng: 119.27767,
				// lat: 26.04230,
				lng: '',
				lat: '',
				nullInfo: false, //空数据状态
				currentMax: 0, //总页数
				pageNum: 1, //条数
				status: 'none',
				current: 0,
				address: {
					addr: ''
				}, //默认地址
				
			}
		},
		onPullDownRefresh() {
			var that = this;
			that.sellerList = [];
			that.pageNum = 1;
			that.bottom = false;
			that.getAdderss()
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onReachBottom() {
			if (this.pageNum < this.currentMax) {
				// uni.showToast({
				// 	icon: "loading",
				// 	title: '加载中',
				// 	duration: 500
				// })
				this.pageNum++;
				this.status = 'loading'
				this.getData()
			} else {
				this.bottom = true;
				this.status = 'nomore'

			}
		},
		onLoad() {
			var that = this;
			that.getAdderss()
			that.getUserInfo()
			
		},
		onShow() {
			var that = this;
			var data = uni.getStorageSync('firstAdd')
			this.$wxHide()
			uni.removeStorageSync('cart')
			if (data) {
				that.sellerList = [];
				that.pageNum = 1;
				that.bottom = false;
				that.getAdderss()
				uni.removeStorageSync('firstAdd')
			}
			
		},
		methods: {
			//获取用户信息
			getUserInfo() {
				this.uni_request({
					url: '/api/user/getUserInfo',
					method: 'POST',
					success: (res) => {
						if (res.data.code == 0 || res.data.code == 200) {

						}
					},
				})

			},
			

			//查询默认地址
			getAdderss() {
				var that = this;
				that.uni_request({
					url: '/api/address/defaultAddress',
					method: 'POST',
					success: (res) => {
						if (res.data.code == 0 || res.data.code == 200) {
							that.address = res.data.data

							if (that.address && that.address.addrId) {
								that.lng = that.gcj02tobd09(that.address.lng,that.address.lat)[0]
								that.lat = that.gcj02tobd09(that.address.lng,that.address.lat)[1]
								that.getData()
							} else {
								uni.showModal({
									content: '暂未添加收货地址，是否前往添加？',
									confirmColor: '#8d4a32',
									showCancel: false,
									success: res => {
										if (res.confirm) {
											that.toAddress()
										}
									}
								})
								// that.getData()
								uni.getLocation({
									type: 'gcj02',
									success: (res) => {
										that.lng = res.longitude
										that.lat = res.latitude
										that.getData()
									},
									fail(e) {
										// alert(JSON.stringify(e))
									}
								})
							}
						} else {
							uni.showToast({
								icon: 'none',
								title: res.data.msg
							})
						}
					},
				})
			},
			//tab切换
			change(index) {
				this.current = index;
			},
			//加载首页商家列表
			getData() {
				var that = this;
				that.uni_request({
					url: '/api/shop/list',
					method: 'POST',
					data: {
						pageNum: that.pageNum,
						pageSize: 10,
						lat: that.lat,
						lng: that.lng,
					},
					success: (res) => {

						if (res.data.code == 0 || res.data.code == 200) {
							that.showData = false;
							that.currentMax = res.data.data.totalPage;
							var data = res.data.data.list;
							for (var i = 0; i < data.length; i++) {
								that.sellerList.push(data[i]);
							}
							if (that.sellerList.length == 0) {
								that.nullInfo = true
							} else {
								that.nullInfo = false
							}

						} else {
							that.nullInfo = true
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							})
						}
					},
					fail(e) {

					}
				})
			},
			//跳转商家详情
			toUrl(id, shopId) {
				uni.navigateTo({
					url: '/pages/menu/menu?id=' + id + '&shopId=' + shopId
				})
			},
			//跳转地址信息
			toAddress() {
				var that = this
				if (that.address && that.address.addrId) {
					uni.navigateTo({
						url: '/pages/address/address?flag=firstAdd'
					})
				} else {
					uni.navigateTo({
						url: '/pages/address/address'
					})
				}
			},

			//距离计算
			countDistance(row) {
				if (row < 1) {
					var data = Number(row).toFixed(3)
					return data * 1000 + 'm'
				} else {
					var data = Number(row).toFixed(1)
					return data + 'km'
				}
			},
			
			//坐标系转换
			gcj02tobd09(lng, lat) {
				const xsPI = 3.14159265358979324 * 3000.0 / 180.0
				const bdlat = Number(lat)
				const bdlng = Number(lng)
				const z = Math.sqrt(bdlng * bdlng + bdlat * bdlat) + 0.00002 * Math.sin(bdlat * xsPI)
				const theta = Math.atan2(bdlat, bdlng) + 0.000003 * Math.cos(bdlng * xsPI)
				const bdslng = z * Math.cos(theta) + 0.0065
				const bdslat = z * Math.sin(theta) + 0.006
				return [bdslng, bdslat]
			},

			/*
			 * 快速置顶
			 */
			topScrollTap: function() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				});
			},
		}
	}
</script>

<style scoped lang="scss">
	page {
		// background: #f5f2f0 !important;
	}

	.container {
		padding: 20rpx;

		.loadList {
			display: flex;
			align-items: flex-start;
			margin-bottom: 10px;

			.loadLogo {
				width: 60px;
				height: 60px;
				margin-right: 10px;

			}

			.loadInfo {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				flex-direction: column;

				.loadTit {
					width: calc(100vw - 90px);
					height: 30px;
				}

				.loadTip {
					width: calc(100vw - 90px);
					height: 20px;
					margin-top: 10px;
				}

				.loadPrice {
					display: flex;
					align-items: center;
					justify-content: space-between;
					width: calc(100vw - 90px);
					height: 140px;

					.loadText {
						width: calc((100vw - 100px) / 3);
						height: 120px;
					}
				}
			}
		}
	}



	.scroll_top {
		background: rgba(51, 51, 51, .8);
		width: 35px;
		height: 35px;
		border-radius: 35px;
		position: fixed;
		z-index: 1;
		zoom: 1;
		right: 20px;
		opacity: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		transform: translateY(100px) translateX(0);
		transition: all .4s ease 0s;
		transform-origin: center;
	}

	.scroll_top.active {
		opacity: 1;
		transform: translateY(-25px) translateX(0);
	}

	.topBox {
		padding: 10px 10px 5px 10px;
		@extend %flex-align-center;
		justify-content: space-between;

		image {
			width: 20px;
			height: 20px;
		}
	}

	/deep/.u-search {
		flex: none !important;
	}

	/deep/.u-search__content {
		flex: none !important;
		width: 100%;
	}

	.selecBox {
		@extend %flex-align-center;

		padding: 0 10px 12px 10px;
		position: relative;

		.row {
			font-size: 14px;
			color: #000;

			text {
				color: #707070;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
				max-width: 150px;
			}

			@extend %flex-align-center;

			image {
				width: 15px;
				height: 15px;
				margin-top: 1px;
			}
		}

		.box {
			color: #707070;
			right: 10px;
			position: absolute;
			@extend %flex-align-center;

			image {
				width: 20px;
				height: 20px;
			}
		}
	}

	.main {
		background: #f5f2f0;
		min-height: 100vh;
		transition: 1s all;
	}

	.showBg {
		background: #ffffff !important;
	}

	.iconText {
		font-size: 8px;
		margin-right: 1px;
	}

	.seller {
		padding: 10px;
		border-radius: 8px;
		margin-bottom: 12px;
		background: #fff;
		@extend %flex-align-start;
		justify-content: space-between;

		image {
			width: 60px;
			height: 60px;
			border-radius: 5px;
		}

		.info {
			width: calc(100% - 75px);

			.seller_tit {
				color: #000;
				font-size: 16px;
				font-weight: bold;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
			}

			.seller_tip {
				@extend %flex-align-center;
				justify-content: flex-start;
				margin-top: 5px;
				width: 100%;
				position: relative;

				.seller_dic {
					right: 0;
					color: #999;
					font-size: 13px;
					position: absolute;
				}

				.line {
					width: 1px;
					height: 20px;
					background: #dedede;
					margin: 0 8px
				}

				.tip {
					@extend %flex-align-start;
					flex-direction: column;
					font-size: 13px;
					color: #999;

					text {
						color: #000;
					}

				}
			}

			.goodsList {
				margin-top: 10px;

				.scroll__item {
					display: inline-block;

					.goodsInfo {
						margin-right: 8px;
						@extend %flex-align-start;
						flex-direction: column;
						width: 100px;
						font-size: 14px;

						image {
							width: 100px;
						}

						.goods_tit {
							width: 100%;
							color: #000;
							margin: 1px 0;
							white-space: normal !important;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 1;
							-webkit-box-orient: vertical;
						}
					}
				}

			}
		}
	}

	.scroll__wrap {
		white-space: nowrap;
	}
</style>